<template>
  <div class="home-scroll">
    <Swiper>
      <SwiperItem v-for="banner in banners" :key="banner.acm">
        <a :href="banner.link">
          <img :src="banner.image" @load="headImgFinishLoad">
        </a>
      </SwiperItem>
    </Swiper>
  </div>
</template>

<script>

  import {Swiper,SwiperItem} from '../../../components/common/swiper/index'

  export default {
    name: "HomeScroll",
    props:{
      banners:{
        type:Array,
        default:function () {
          return []
        }
      }
    },
    data:function () {

      return {

        isLoad:false
      }
    },
    methods:{

      headImgFinishLoad(){

        if (!this.isLoad){

          this.$emit('headImgFinishLoad');
          this.isLoad = true;
        }

      }
    },
    components:{
      Swiper,
      SwiperItem
    }
  }
</script>

<style scoped>

  .home-scroll{
    width: 375px;
  }

  .home-scroll img{

    vertical-align: middle;
  }



</style>
